<template>
	<view>
		<view class="search-bar">
			<!-- {{cityId}} -->
			<view class="now-address">
				<AddressPicker class="title" @change="change" :level="2">{{cityName}}
				</AddressPicker>
			</view>
			<view class="search-input">
				<input type="text" v-model="val" @input="searchInfo" placeholder="请输入地址或医院名称筛选" />
			</view>
		</view>
		<view>
			<view class="ins-item" v-for="(item,index) in addressList" :key="index">
				<view class="item-title">
					{{item.name}}
				</view>
				<view class="area">
					所在区县： {{item.province + item.city}}
				</view>
				<view class="phone">
					联系电话： <text>{{item.phone}}</text>
				</view>
				<view class="address-info">
					详细地址：{{item.address}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import AddressPicker from "../lingdang-AddressPicker/AddressPicker.vue";
	export default {
		name: "institutionss",
		data() {
			return {
				val: '',
				addressList: [],
				cityInfo: {
					pro: '',
					name: '',
					code: '',
				}
			};
		},
		props: ['city', 'juhekey'],
		components: {
			AddressPicker
		},
		computed: {
			cityName() {
				return this.cityInfo.pro ? `${this.cityInfo.pro} ${this.cityInfo.name}` :
					`${this.city.pro} ${this.city.name}`
			}
		},
		methods: {
			getInfo(code) {
				uni.request({
					url: 'http://apis.juhe.cn/springTravel/hsjg',
					data: {
						city_id: code,
						key: this.juhekey
					},
					success: res => {
						console.log(res)
						this.addressList = res.data.result.data
					}
				})
			},
			change(e) {
				this.cityInfo.pro = e.data[0].name
				this.cityInfo.code = e.data[1].id
				this.cityInfo.name = e.data[1].name
				this.getInfo(this.cityInfo.code)
			},
			searchInfo() {
				console.log(this.val)
			}
		},
		mounted() {
			this.getInfo(this.city.code)

		}
	}
</script>

<style lang="less" scoped>
	.search-bar {
		display: flex;
		background-color: #eaeaea;
		height: 100rpx;
		align-items: center;
		border-radius: 20rpx;

		margin: 20rpx 60rpx;

		.now-address {
			width: 40%;
			color: #333333;
			text-align: center;
			border-right: 1rpx solid #cecece;
		}

		.search-input {
			width: 60%;
			padding-left: 20rpx;

			input {
				font-size: 20rpx;
			}
		}
	}

	.ins-item {
		margin: 20rpx 60rpx;
		box-shadow: 1px 1px 10px #bebebe,
			-1px -1px 5px #ffffff;

		view {
			padding: 20rpx 0rpx;
			margin: 0 20rpx;
		}

		.item-title {
			font-weight: bold;
			color: #333333;
			font-size: 26rpx;

			box-sizing: border-box;
			border-bottom: 1rpx solid #cecece;
		}

		.area {
			padding: 10rpx 0;
		}

		.phone {
			padding: 10rpx 0;

			text {
				color: green;
			}
		}

		.address-info {
			padding: 10rpx 0;
		}
	}
</style>
